<template>
	<view class="order-list-page" :style="{ 'background':'#f5f7fa'}">
		<!-- 顶部导航栏 -->
		<shopro-navbar :isBack="true" :background="{background: '#f5f7fa'}">
			<text slot="content" class="u-flex u-flex-center u-flex-items-center" style="color: #000; width: 85%; text-align: center;padding-left: 20rpx;height: 100%;">我的订单</text>
		</shopro-navbar>
		<OrderTabs :tabs="tabs" :activeTab="activeTab" @onChange="onTabChange" />
		<view class="orders">
			<OrderCard
				v-for="(order,index) in ordersList"
				:key="index"
				:order="order"
				@cancel="onCancel(order)"
				@pay="onPay(order)"
				@afterSale="onAfterSale(order)"
			/>
			<view v-if="ordersList.length === 0" class="empty">暂无订单</view>
		</view>
	</view>
</template>

<script>
import OrderTabs from '@/components/OrderTabs.vue';
import OrderCard from '@/components/OrderCard.vue';
import { record } from '@/api'
export default {
	components: {
		OrderTabs,
		OrderCard
	},
	data() {
		return {
			tabs: [
				{
					label: '全部订单',
					value: '-1'
				},
				{
					label: '待支付',
					value: '0'
				},
				{
					label: '已付款',
					value: '1'
				}
			],
			activeTab: 0,
			payStatus: '',
			currentOrderId: '',
			ordersList: []
		};
	},
	onLoad() {
		this.getOrderList();
	},
	methods: {
		goBack() {
			uni.navigateBack();
		},
		onTabChange(item, index) {
			this.activeTab = index;
			if(item.value === '-1') {
				this.payStatus = '';
			} else {
				this.payStatus = item.value;
			}
			this.getOrderList();
		},
		getOrderList () {
			record.getOrderList({
				pay_status: this.payStatus
			}).then((res) => {
				if (res.response.data.code == 1) {
					this.ordersList = res.response.data.data.data;
					console.log(this.ordersList, 'ordersList');
				}
			})
		},
		onCancel(order) {
			uni.showModal({
				title: '提示',
				content: '确定要取消该订单吗？',
				success: (res) => {
					if (res.confirm) {
						record.cancelOrder({
							order_d: order.id,
						}).then(res2 => {
							if(res2.response.data.code === 1) {
								uni.showToast({
									title: '已取消',
									icon: 'none'
								});
							}
						})	
					}
				}
			});
		},
		onPay(order) {
			uni.showLoading({
				title: '支付中...',
			});
			const _this = this;
			console.log(order, 'orderorderorder====');
			_this.currentOrderId = order.id;
			wx.login({
				success: function(res) {
					console.log(res, 'codecccceeeee');
					record.getUserOpenid({
						code: res.code
					}).then(resu => {
						_this.payOrder();
					})
				},
				fail: function(res) {
					console.log('登陆失败');
				},
			})
		},
		payOrder() {
			// 支付订单
			record.buyCourse({
				paytype: 'wechat',
				order_id: this.currentOrderId,
				method: 'miniapp'
			}).then(res2 => {
				if(res2.response.data.code === 1) {
					let {timeStamp, nonceStr, package: packageParam, signType, paySign } = res2.response.data.data;
					wx.requestPayment({
						timeStamp,
						nonceStr,
						package: packageParam,
						signType,
						paySign,
						success(res) {
							console.log("res: ", res);
						},
						fail(res) {
							console.log('error', res);
						}
					})
					uni.hideLoading();
				}
			})
		},
		onAfterSale(order) {
			uni.showToast({
				title: '申请售后',
				icon: 'none'
			});
			// 这里可跳转到售后页面
		}
	}
}
</script>

<style lang="scss">
.order-list-page {
	background: #f7f8fa;
	min-height: 100vh;
	.header {
		display: flex;
		align-items: center;
		padding: 32rpx 0 16rpx 24rpx;
		background: #fff;
		.back-icon {
			margin-right: 24rpx;
		}
		.title {
			font-size: 36rpx;
			font-weight: bold;
			flex: 1;
			text-align: center;
			margin-right: 48rpx;
		}
	}
	.orders {
		padding: 0 24rpx;
		.empty {
			text-align: center;
			color: #bbb;
			margin: 80rpx 0;
			font-size: 30rpx;
		}
	}
}
</style>